// popup.js
// 获取DOM元素
const settingsBtn = document.getElementById('settingsBtn');
const backBtn = document.getElementById('backBtn');
const settingsForm = document.getElementById('settingsForm');
const mainContent = document.getElementById('mainContent');
const saveBtn = document.getElementById('saveBtn');

// 获取翻译保存表单元素
const aliasInput = document.getElementById('alias');
const saveTranslationBtn = document.getElementById('saveTranslationBtn');
const savedAliasesList = document.getElementById('savedAliasesList');

// 获取表单元素
const apiUrlInput = document.getElementById('apiUrl');
const apiKeyInput = document.getElementById('apiKey');
const sourceLangSelect = document.getElementById('sourceLang');
const targetLangSelect = document.getElementById('targetLang');
const translateRoleInput = document.getElementById('translateRole');

// 当前已加载的别名
let currentlyLoadedAlias = null;

// MD5哈希函数（简化版）
function md5(str) {
  // 这里使用一个简单的哈希函数替代，实际项目中建议使用标准的MD5库
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // 转换为32位整数
  }
  return Math.abs(hash).toString(16);
}

// 从存储中加载配置并回显到表单
function loadConfig() {
  chrome.storage.local.get(['config'], function(result) {
    let config = result.config;
    
    // 如果配置不存在，使用默认值
    if (!config) {
      config = defaultConfig;
    }
    
    // 将配置值回显到表单字段
    apiUrlInput.value = config.apiUrl || defaultConfig.apiUrl;
    apiKeyInput.value = config.apiKey || defaultConfig.apiKey;
    sourceLangSelect.value = config.sourceLang || defaultConfig.sourceLang;
    targetLangSelect.value = config.targetLang || defaultConfig.targetLang;
    translateRoleInput.value = config.translateRole || defaultConfig.translateRole;
  });
}

// 显示已保存的别名列表
function loadSavedAliases() {
  // 清空现有列表
  savedAliasesList.innerHTML = '';
  
  // 获取当前页面URL
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    if (tabs.length > 0) {
      const currentTab = tabs[0];
      const currentUrl = currentTab.url;
      const urlHash = md5(currentUrl);
      
      // 首先获取当前页面加载的别名
      chrome.tabs.sendMessage(currentTab.id, {cmd: 'GET_CURRENT_ALIAS'}, function(aliasResponse) {
        if (aliasResponse && aliasResponse.alias) {
          currentlyLoadedAlias = aliasResponse.alias;
        } else {
          currentlyLoadedAlias = null;
        }
        
        // 从本地存储读取保存的数据
        chrome.storage.local.get(['saveData'], function(result) {
          const saveData = result.saveData || {};
          const urlData = saveData[urlHash];
          
          // 获取保存列表容器元素
          const savedListContainer = document.getElementById('savedList');
          

          if (urlData) {
            // 过滤出别名键（排除'url'键）
            const aliases = Object.keys(urlData).filter(key => key !== 'url');
            
            if (aliases.length > 0) {
              // 有数据时显示列表
              savedListContainer.style.display = 'block';
              
              // 遍历除了url以外的所有键（即别名）
              Object.keys(urlData).forEach(key => {
                if (key !== 'url') {
                  const li = document.createElement('li');
                  li.style.display = 'flex';
                  li.style.justifyContent = 'space-between';
                  li.style.alignItems = 'center';
                  li.style.padding = '4px 0';
                  li.style.borderBottom = '1px solid #eee';
                  
                  const span = document.createElement('span');
                  span.textContent = key;
                  span.style.flexGrow = '1';

                  // 创建按钮容器
                  const buttonContainer = document.createElement('div');
                  buttonContainer.style.display = 'flex';
                  buttonContainer.style.gap = '5px';
                  
                  const loadBtn = document.createElement('button');
                  loadBtn.style.color = 'white';
                  loadBtn.style.border = 'none';
                  loadBtn.style.padding = '2px 8px';
                  loadBtn.style.borderRadius = '4px';
                  loadBtn.style.cursor = 'pointer';
                  loadBtn.style.fontSize = '12px';
                  
                  // 如果是当前加载的别名，禁用按钮
                  if (currentlyLoadedAlias === key) {
                    // 在别名输入框中显示当前加载的别名
                    aliasInput.value = currentlyLoadedAlias;

                    loadBtn.disabled = false;
                    loadBtn.textContent = '重新加载';
                    loadBtn.style.background = '#f87800ff';
                  }else{
                    loadBtn.disabled = false;
                    loadBtn.textContent = '加载';
                    loadBtn.style.background = '#007bff';
                  }
                  
                  loadBtn.addEventListener('click', function() {
                    loadSavedTranslation(currentTab.id, urlHash, key, loadBtn);
                  });

                  // 创建删除按钮
                  const deleteBtn = document.createElement('button');
                  deleteBtn.textContent = '删除';
                  deleteBtn.style.color = 'white';
                  deleteBtn.style.background = '#dc3545';
                  deleteBtn.style.border = 'none';
                  deleteBtn.style.padding = '2px 8px';
                  deleteBtn.style.borderRadius = '4px';
                  deleteBtn.style.cursor = 'pointer';
                  deleteBtn.style.fontSize = '12px';

                  deleteBtn.addEventListener('click', function() {
                    deleteSavedTranslation(currentTab.id, urlHash, key, li);
                  });


                  buttonContainer.appendChild(loadBtn);
                  buttonContainer.appendChild(deleteBtn);
                  
                  li.appendChild(span);
                  li.appendChild(buttonContainer);
                  savedAliasesList.appendChild(li);
                }
              });
            } else {
              // 没有别名数据时隐藏列表
              savedListContainer.style.display = 'none';
            }
          }else {
            // 没有该URL的数据时隐藏列表
            savedListContainer.style.display = 'none';
          }
        });
      });
    }
  });
}

// 删除保存的翻译内容
function deleteSavedTranslation(tabId, urlHash, alias, listItemElement) {
  if (!confirm(`确定要删除别名 "${alias}" 吗？`)) {
    return;
  }

  // 从本地存储读取保存的数据
  chrome.storage.local.get(['saveData'], function(result) {
    const saveData = result.saveData || {};
    const urlData = saveData[urlHash];
    
    if (urlData && urlData[alias]) {
      // 删除该别名的数据
      delete urlData[alias];
      
      // 如果该URL下没有其他别名数据了，删除整个URL记录
      const aliasCount = Object.keys(urlData).filter(key => key !== 'url').length;
      if (aliasCount === 0) {
        delete saveData[urlHash];
      }
      
      // 保存更新后的数据
      chrome.storage.local.set({saveData: saveData}, function() {
        if (chrome.runtime.lastError) {
          console.error('删除失败:', chrome.runtime.lastError);
          alert('删除失败');
          return;
        }
        
        // 检查删除的是否是当前加载的别名
        if (currentlyLoadedAlias === alias) {
          // 向content script发送消息，清除页面上的所有翻译标签
          chrome.tabs.sendMessage(tabId, {
            cmd: 'CLEAR_TRANSLATION_BOXES'
          }, function(clearResponse) {
            if (chrome.runtime.lastError) {
              console.error('清除翻译标签失败:', chrome.runtime.lastError);
            }
            
            // 向content script发送消息，清除当前加载的别名
            chrome.tabs.sendMessage(tabId, {
              cmd: 'SET_CURRENT_ALIAS',
              alias: null
            }, function(response) {
              if (chrome.runtime.lastError) {
                console.error('更新当前别名失败:', chrome.runtime.lastError);
              }
              // 更新当前加载的别名
              currentlyLoadedAlias = null;
              // 在别名输入框中显示当前加载的别名
              aliasInput.value = '';
              // 重新加载别名列表
              loadSavedAliases();
            });
          });
        } else {
          // 重新加载别名列表
          loadSavedAliases();
        }
        
        alert('删除成功！');
      });
    } else {
      alert('未找到要删除的数据');
    }
  });
}

// 加载保存的翻译内容
function loadSavedTranslation(tabId, urlHash, alias, clickedButton) {
  // 从本地存储读取保存的数据
  chrome.storage.local.get(['saveData'], function(result) {
    const saveData = result.saveData || {};
    const urlData = saveData[urlHash];
    
    if (urlData && urlData[alias]) {
      const aliasData = urlData[alias];
      const labels = aliasData.labels || [];
      
      // 向content script发送消息，清除现有标签并加载新标签
      chrome.tabs.sendMessage(tabId, {
        cmd: 'LOAD_SAVED_TRANSLATION',
        labels: labels,
        alias: alias  // 传递别名
      }, function(response) {
        if (chrome.runtime.lastError) {
          console.error('加载翻译失败:', chrome.runtime.lastError);
          alert('加载翻译失败');
          return;
        }
        
        if (response && response.success) {
          // 更新当前加载的别名
          currentlyLoadedAlias = alias;
          
          // 在别名输入框中显示当前加载的别名
          aliasInput.value = alias;
          
          // 更新按钮状态
          updateLoadButtons(alias);
        }
      });
    }
  });
}

// 更新所有加载按钮的状态
function updateLoadButtons(activeAlias) {
  const buttons = savedAliasesList.querySelectorAll('button');
  buttons.forEach(button => {
    // 只处理加载按钮，跳过删除按钮
    if (button.textContent === '删除') {
      return;
    }
    
    // 获取别名文本（需要向上两级找到包含别名的span元素）
    const listItem = button.closest('li');
    const aliasSpan = listItem.querySelector('span');
    const aliasText = aliasSpan.textContent;
    
    if (aliasText === activeAlias) {
      button.textContent = '重新加载';
      button.disabled = false;
      button.style.background = '#f87800ff';
    } else {
      button.textContent = '加载';
      button.disabled = false;
      button.style.background = '#007bff';
    }
  });
}

// 在页面加载时显示已保存的别名列表
document.addEventListener('DOMContentLoaded', function() {
  loadSavedAliases();
});

// 显示设置表单
settingsBtn.addEventListener('click', function() {
  // 显示表单时加载配置
  loadConfig();
  mainContent.style.display = 'none';
  settingsForm.style.display = 'block';
});

// 隐藏设置表单，返回主内容
backBtn.addEventListener('click', function() {
  settingsForm.style.display = 'none';
  mainContent.style.display = 'block';
});

// 保存翻译内容
saveTranslationBtn.addEventListener('click', function() {
  // 参数检查
  if (!aliasInput.value.trim()) {
    alert('别名不能为空');
    return;
  }
  
  const alias = aliasInput.value.trim();
  
  // 获取当前活动标签页
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    if (tabs.length > 0) {
      const currentTab = tabs[0];
      const currentUrl = currentTab.url;
      const urlHash = md5(currentUrl);
      
      // 向content script发送消息获取翻译标签列表
      chrome.tabs.sendMessage(currentTab.id, {cmd: 'GET_TRANSLATION_TAGS'}, function(response) {
        if (chrome.runtime.lastError) {
          console.error('获取翻译标签失败:', chrome.runtime.lastError);
          alert('获取翻译标签失败');
          return;
        }
        
        if (response && response.tags) {
          const translationTags = response.tags;
          
          // 构造保存的数据结构
          const labels = translationTags.map(tag => ({
            width: tag.width,
            top: tag.top,
            left: tag.left,
            contents: tag.content
          }));
          
          // 从存储中获取现有数据
          chrome.storage.local.get(['saveData'], function(result) {
            let existingData = result.saveData || {};
            
            // 如果该URL已存在数据，则合并
            if (existingData[urlHash]) {
              // 保留现有的其他别名，只更新当前别名
              existingData[urlHash][alias] = {
                labels: labels
              };
            } else {
              // 创建新记录
              existingData[urlHash] = {
                url: currentUrl,
                [alias]: {
                  labels: labels
                }
              };
            }
            
            // 保存更新后的数据
            chrome.storage.local.set({saveData: existingData}, function() {
              if (chrome.runtime.lastError) {
                console.error('保存失败:', chrome.runtime.lastError);
                alert('保存失败，请查看控制台了解详情');
              } else {
                alert('翻译内容已保存！');

                // 更新当前加载的别名
                chrome.tabs.sendMessage(currentTab.id, {
                  cmd: 'SET_CURRENT_ALIAS',
                  alias: alias  // 传递别名
                }, function(response) {
                  if (chrome.runtime.lastError) {
                    console.error('更新当前别名失败:', chrome.runtime.lastError);
                    return;
                  }
                  
                  if (response && response.success) {
                    // 更新当前加载的别名变量
                    loadSavedAliases();
                  }
                });
              }
            });
          });
        }
      });
    }
  });
});

// 保存设置
saveBtn.addEventListener('click', function() {
  // 参数检查
  if (!apiUrlInput.value.trim()) {
    alert('API URL不能为空');
    return;
  }
  
  if (!apiKeyInput.value.trim()) {
    alert('API Key不能为空');
    return;
  }
  
  if (!sourceLangSelect.value.trim()) {
    alert('当前语言不能为空');
    return;
  }
  
  if (!targetLangSelect.value.trim()) {
    alert('目标语言不能为空');
    return;
  }
  
  if (!translateRoleInput.value.trim()) {
    alert('翻译角色不能为空');
    return;
  }
  
  // 封装表单数据为JSON
  const configData = {
    apiUrl: apiUrlInput.value.trim(),
    apiKey: apiKeyInput.value.trim(),
    sourceLang: sourceLangSelect.value,
    targetLang: targetLangSelect.value,
    translateRole: translateRoleInput.value.trim()
  };
  
  const saveData = {
    config: configData
  };
  
  // 调用chrome.storage.local进行本地保存
  chrome.storage.local.set(saveData, function() {
    if (chrome.runtime.lastError) {
      console.error('保存失败:', chrome.runtime.lastError);
      alert('保存失败，请查看控制台了解详情');
    } else {
      alert('设置已保存！');
    }
  });
});